<template>
  <div class="span-control-list" style="width: 100%;margin-left: 0!important;">
    <el-card class="box-card set-organ" style="margin: 0px; width: 100%; min-height: 99%">
      <div slot="header" class="clearfix">
        <span>订单管理</span>
      </div>
      <el-row>
        <div class="alert-container clearfix">
          <el-alert v-for="alert in alerts.successes" :key="alert.title"
                    v-bind:title="alert.title"
                    type="success"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.infos" :key="alert.title"
                    v-bind:title="alert.title"
                    type="info"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.warnings" :key="alert.title"
                    v-bind:title="alert.title"
                    type="warning"
                    show-icon>
          </el-alert>
          <el-alert v-for="alert in alerts.errors" :key="alert.title"
                    v-bind:title="alert.title"
                    type="error"
                    show-icon>
          </el-alert>
        </div>
      </el-row>
      <el-row>
        <!--数据表格-->
        <el-col>
          <!--新增任务按钮-->
          <down-search :selectValues="selectValues" @returnedValue="searchByCondition"></down-search>
          <div style="float: right; margin-bottom: 15px">

            <el-button type="primary" @click="addOrder()" v-permission:simple_order_Order_Add>新增订单</el-button>
          </div>
          <div class="table-control">
            <el-table v-loading="tableLoading" size="small" class="table-style" :data="orders" border
                      highlight-current-row @current-change="handleCurrentChange">
              <el-table-column type="expand" fixed="left">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="list-table-expand">
                    <!--<el-form-item label="标识">-->
                    <!--<span>{{ props.row.EId }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="名称">-->
                    <!--<span>{{ props.row.name }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="订单编号">
                      <span>{{ props.row.orderCode }}</span>
                    </el-form-item>
                    <el-form-item label="物流编号">
                      <span>{{ props.row.logisticsCode }}</span>
                    </el-form-item>
                    <!--<el-form-item label="商家">-->
                    <!--<span>{{ props.row.businessId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="商家">
                      <span>{{ props.row.businessName }}</span>
                    </el-form-item>
                    <el-form-item label="总价">
                      <span>{{ props.row.totalPrice }}</span>
                    </el-form-item>
                    <el-form-item label="下单时间">
                      <span>{{ props.row.orderTime }}</span>
                    </el-form-item>
                    <el-form-item label="支付时间">
                      <span>{{ props.row.paymentTime }}</span>
                    </el-form-item>
                    <el-form-item label="更新时间">
                      <span>{{ props.row.updateTime }}</span>
                    </el-form-item>
                    <el-form-item label="订单状态">
                      <span>{{ props.row.orderStatus }}</span>
                    </el-form-item>
                    <el-form-item label="收货人姓名">
                      <span>{{ props.row.receiverName }}</span>
                    </el-form-item>
                    <el-form-item label="收货人电话">
                      <span>{{ props.row.receiverTel }}</span>
                    </el-form-item>
                    <el-form-item label="收货人地址">
                      <span>{{ props.row.receiverAddress }}</span>
                    </el-form-item>
                    <!--<el-form-item label="订单评价">-->
                    <!--<span>{{ props.row.evaluationName }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="订单评价">-->
                    <!--<span>{{ props.row.evaluationId }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="用户">
                      <span>{{ props.row.employeeName }}</span>
                    </el-form-item>
                    <!--<el-form-item label="用户">-->
                    <!--<span>{{ props.row.employeeId }}</span>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="备注">-->
                    <!--<span>{{ props.row.remark }}</span>-->
                    <!--</el-form-item>-->
                    <el-form-item label="创建人">
                      <span>{{ props.row.createId }}</span>
                    </el-form-item>
                    <el-form-item label="创建时间">
                      <span>{{ props.row.createDatetime }}</span>
                    </el-form-item>
                    <el-form-item label="修改人">
                      <span>{{ props.row.updateId }}</span>
                    </el-form-item>
                    <el-form-item label="修改时间">
                      <span>{{ props.row.updateDatetime }}</span>
                    </el-form-item>
                    <div v-for="item in props.row.orderItem" style="border-top: #333333 solid 1px">
                      <el-form-item label="商品名称">
                        <span>{{item.goodName}}</span>
                      </el-form-item>
                      <el-form-item label="商品价格">
                        <span>{{item.goodPrice}}</span>
                      </el-form-item>
                      <el-form-item label="商品数量">
                        <span>{{item.goodAmount}}</span>
                      </el-form-item>
                      <el-form-item label="总价">
                        <span>{{item.totalPrice}}</span>
                      </el-form-item>
                    </div>
                    <div style="border-top: #CC3300 solid 1px">
                      <el-form-item label="评价内容">
                        <span>{{props.row.evaluation.evaluationContent}}</span>
                      </el-form-item>
                    </div>
                  </el-form>
                </template>
              </el-table-column>

              <el-table-column show-overflow-tooltip align="left" prop="name" label="查看订单信息" min-width="100"
                               fixed="left" sortable resizable show-overflow-tooltip>
                <template slot-scope="scope">
                  <p v-on:click="displayOrder(orders[scope.$index].eid)"
                     style="text-decoration: underline">
                    {{ orders[scope.$index].name }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="orderCode" label="订单编号" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="logisticsCode" label="物流编号" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="businessName" label="商家" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="totalPrice" label="总价" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="orderTime" label="下单时间" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="paymentTime" label="支付时间" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="updateTime" label="更新时间" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="orderStatus" label="订单状态" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="receiverName" label="收货人姓名" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="receiverTel" label="收货人电话" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <el-table-column align="left" clalss="setCenter" prop="receiverAddress" label="收货人地址" min-width="80"
                               sortable resizable show-overflow-tooltip></el-table-column>
              <!--<el-table-column align="left" clalss="setCenter" prop="evaluationName" label="订单评价" min-width="80"-->
                               <!--sortable resizable show-overflow-tooltip></el-table-column>-->
              <el-table-column align="left" clalss="setCenter" prop="employeeName" label="用户" min-width="80" sortable
                               resizable show-overflow-tooltip></el-table-column>
              <!--<el-table-column align="left" clalss="setCenter" prop="remark" label="备注" min-width="80" sortable resizable show-overflow-tooltip></el-table-column>-->

              <el-table-column label="操作" min-width="120" resizable>
                <template slot-scope="scope">
                  <template>
                    <el-button @click="editOrganation(orders[scope.$index].eid)" type="text" size="small"
                               v-permission:simple_order_Order_Edit>编辑
                    </el-button>
                  </template>
                  <template>
                    <el-button @click="deleteOrder(orders[scope.$index].eid)" type="text" size="small"
                               v-permission:simple_order_Order_Delete><p
                      style="color: red !important;">删除</p></el-button>
                  </template>
                  <template>
                    <el-button @click="responseEvaluation(orders[scope.$index].evaluation.eid)" type="text" size="small">
                      <p style="color: #00CC00 !important;">回复评价</p></el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>

            <!--分页功能-->
            <div class="block">
              <el-pagination
                class="page-style" @size-change="changeSize" @current-change="changePage"
                background
                :current-page="currentPage"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-alert v-for="remark in alerts.remarks" :key="remark.title"
                  v-bind:title="remark.title"
                  type="info"
                  v-bind:description="remark.content">
        </el-alert>
      </el-row>
    </el-card>
  </div>

</template>
<script>
  import {mapState} from 'vuex';
  import {OrderService} from './OrderService';
  import downSearch from '@/components/select/downSearch'

  export default {
    components: {downSearch},
    data() {
      return {
        rules: {},
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        hightlight: true,
        orders: [],
        tableLoading: false,
        alerts: {
          remarks: [{title: "功能说明", content: "TODO: 请在这里加上功能说明"},],
          successes: [], //TODO:[{title:'消息内容'},]
          infos: [],
          warnings: [],
          errors: []
        },
        selectValues: [
          {key: "orderCode", value: "订单编号"},
          {key: "logisticsCode", value: "物流编号"},
          {key: "businessName", value: "商家"},
          {key: "totalPrice", value: "总价"},
          {key: "orderTime", value: "下单时间"},
          {key: "paymentTime", value: "支付时间"},
          {key: "updateTime", value: "更新时间"},
          {key: "orderStatus", value: "订单状态"},
          {key: "receiverName", value: "收货人姓名"},
          {key: "receiverTel", value: "收货人电话"},
          {key: "receiverAddress", value: "收货人地址"},
          {key: "evaluationName", value: "订单评价"},
          {key: "employeeName", value: "用户"},
          // {key:"remark",value:"备注"},
        ],
        condition: ''

      }
    },
    created: function () {
      this.findOrders();
    },
    methods: {

      searchByCondition(value) {
        this.condition = value;
        this.findOrders();
      },
      addAlert(message, title, type) {
        //type 可选的值为:remarks,successes,infos,warnings,errors
        type = type ? type : "errors";
        type = this.alerts[type] ? type : "errors";
        title = title ? title : message;
        this.alerts[type].unshift({title: title, content: message});
      },
      removeAlert(title, type) {
        //type 可选的值为:remarks,successes,infos,warnings,errors
        type = type ? type : "errors";
        type = this.alerts[type] ? type : "errors";
        for (var i = this.alerts[type].length - 1; i >= 0; i--) {
          delete this.alerts[type][i]
        }
      },
      refresh() {
        this.findOrders();
      },
      installParms() {
        var parms = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          columnName: this.condition.columnName,
          content: this.condition.content
        }
        return parms;
      },
      findOrders() {
        var parms = this.installParms();
        this.buttonRequestProgressStart("正在搜索,请稍后...");
        OrderService.findOrders(parms).then((res) => {
          this.buttonRequestProgressClose();
          this.orders = res.data.datas;
          this.orders.forEach((order) => {
            // var orderItems = order.orderItem;
            // orderItems.forEach((item) => {
            //   console.log("item", item)
            // })
            console.log("evaluation", order)
          })
          this.totalCount = res.data.totalCount;
        }).catch((error) => {
          this.buttonRequestProgressClose();
          this.$message({
            type: 'error',
            message: '网络繁忙，请稍候再试！'
          })
        })
      },
      displayOrder(orderId) {
        var router = this.$router;
        router.push({path: '/simple/order/order/display/' + orderId, query: {}});
      },
      deleteOrder(orderId) {
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.buttonRequestProgressStart("正在删除,请稍后...");
          OrderService.deleteOrder(orderId).then((res) => {
            this.buttonRequestProgressClose();
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
            this.refresh();
          }).catch((error) => {
            this.buttonRequestProgressClose();
            //error的data属性是后台传入的数据,data的extendedData存有后台传入的数据
            this.isSubmiting = false;
            this.addAlert({title: error.data.message})
            this.$message({
              type: 'error',
              message: '删除失败，,原因是：' + error.data.message
            })

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      changeSize(val) {
        this.pageSize = val;
        this.findOrders();
      },
      changePage(val) {
        this.currentPage = val;
        this.findOrders();
      },
      addOrder() {
        //新增订单
        var router = this.$router;
        router.push({path: '/simple/order/order/add', query: {}});
      },
      editOrganation(orderId) {
        //编辑订单
        var router = this.$router;
        router.push({path: '/simple/order/order/edit/' + orderId, query: {}});
      },
      handleCurrentChange(currentRow, oldCurrentRow) {
        //this.currentRow = val;
      },
      responseEvaluation(orderId){
        var router = this.$router;
        router.push({path: '/simple/order/order/responseEvaluation/' + evaluationId, query: {}});
      },
    }
  }
</script>
<style scoped lang="scss">
</style>
